<template>
  <div>
    <!-- 行内属性不加`v-bind:` 都是传字符串 -->
    <!-- <my-goods title="螺蛳粉" :price="15" desc="广西老表哦"/>
    <my-goods title="臭豆腐" :price="10"/>
    <my-goods title="榴莲" :price="40" desc="很好吃，就是颜色那个什么一样"/> -->

    <!-- <my-goods
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :price="item.price"
      :desc="item.desc"
      @cut="fn"
    /> -->

    <my-goods 
      :title="item.name" 
      :price="item.price" 
      :desc="item.desc" 
      @cut="fn"
    />
  </div>
</template>

<script>
import MyGoods from "./components/MyGoods.vue";
export default {
  components: {
    MyGoods,
  },
  methods: {
    fn(num) {
      console.log("收到儿子的通知了", num);
      this.item.price -= num;
    },
  },

  data() {
    return {
      item: {
        id: 11,
        name: "潮汕粥",
        price: 99,
        desc: "营养美味",
      },
      // 服务器返回的
      list: [
        { id: 11, name: "潮汕粥", price: 99, desc: "营养美味" },
        { id: 33, name: "猪脚饭", price: 15, desc: "肥肥的" },
        { id: 39, name: "沙县小吃", price: 14, desc: "吃蒸饺和汤" },
        { id: 434, name: "自选快餐", price: 14, desc: "随便选" },
      ],
    };
  },
};
</script>

<style></style>
